﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Monedas</title>
    <style type="text/css">
        table tbody tr td {
            padding: 5px 20px;
        }
    </style>
</head>
<body>
    <h2>Monedas</h2>
    
    <table>
        <thead>
            <tr>
                <th>Moneda</th>
                <th>Compra</th>
                <th>Venta</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: monedas">
            <tr>
                <td data-bind="text: nombre"></td>
                <td data-bind="text: formattedCompra"></td>
                <td data-bind="text: formattedVenta"></td>
            </tr>
        </tbody>
    </table>
    
    <input type="button" id="actulizar" value="Actualizar"/>
    
    <script src="/Scripts/knockout-2.3.0.js"></script>
<!--    <script src="/js/monedas.js"></script>-->
    <script src="/Scripts/jquery-1.6.4.js"></script>
    <script src="/Scripts/jquery.signalR-1.1.3.js"></script>
    <script src="/signalr/hubs" type="text/javascript"></script>
    <script type="text/javascript">
        // Class to represent a row in the seat reservations grid
        function Moneda(id, nombre, compra, venta) {
            var self = this;
            self.id = id;
            self.nombre = nombre;
            self.compra = compra;
            self.venta = venta;

            self.formattedCompra = ko.computed(function () {
                return "$" + self.compra.toFixed(2);
            });

            self.formattedVenta = ko.computed(function () {
                return "$" + self.venta.toFixed(2);
            });
        }

        // Overall viewmodel for this screen, along with initial state
        function MonedasViewModel(monedas) {
            var self = this;

            //Editable data
            self.monedas = ko.observableArray([
                //new Moneda(1, "Dolar Oficial", 0, 0),
                //new Moneda(2, "Dolar Cueva", 0, 0),
                //new Moneda(3, "Dolar Blue", 0, 0),
                //new Moneda(4, "Euro", 0, 0),
                //new Moneda(5, "Libra", 0, 0),
                //new Moneda(6, "Real", 0, 0),
                //new Moneda(7, "Guarani", 0, 0)
            ]);

            $.getJSON('/api/monedas', function (data) {
                debugger;
                $(data).each(function() {
                    self.monedas.push(new Moneda(this.Id, this.Nombre, this.Compra, this.Venta));
                });
            });
            
            // SIGNALR
            // Proxy created on the fly          
            var moneda = $.connection.moneda;

            // Declare a function on the chat hub so the server can invoke it          
            moneda.client.cotizacionMonedas = function (mon) {

                self.monedas.removeAll();

                $(mon).each(function () {
                    //debugger;
                    self.monedas.push(new Moneda(this.Id, this.Nombre, this.Compra, this.Venta));
                });
            };

            // Start the connection
            $.connection.hub.start().done(function () {
                $("#actulizar").click(function () {
                    // Call the chat method on the server
                    moneda.server.obtenerMonedas();
                });
            });
        }

        ko.applyBindings(new MonedasViewModel());

        $(function () {
            
        });
    </script>
</body>
</html>
